<template>
	<div class="MemberPicker">
		<div v-if="showSelectedUser" class="showSelectedUser">
			<a-spin :spinning="loadSelectedMembers">
				<a-tag v-if="members.length > 0" color="blue" v-for="(item, key) in members" :key="item.empNo" closable @close="closetag(item)"> {{ item.name }} {{ item.empNo }} </a-tag>
				<a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
			</a-spin>
		</div>
		<a-input-search v-model:value="searchKey" placeholder="输入工号/全拼/姓名 搜索员工" style="margin-bottom: 12px" />
		<a-checkbox-group :value="checkedList" @change="plainOptionsChange" :options="plainOptions" />
		<div ref="box" class="box">
			<a-list size="small" bordered :data-source="userList">
				<template #renderItem="{ item }">
					<a-list-item :key="item.id" @click="selected(item)" :class="{ selected: item.checked }">
						<a-row :class="{ 'item-line': true, leave: item.userStatus == 'DISABLED' }" style="width: 100%">
							<a-col v-if="showCheckBox" :span="3">
								<a-checkbox :disabled="item.delete === false" v-model:checked="item.checked"></a-checkbox>
							</a-col>
							<a-col :class="{ name: true }" :title="item.name" :span="6">{{ item.name }} </a-col>
							<a-col :title="item.id" :span="5">{{ item.empNo }} </a-col>
							<a-col :title="item.orgName" :span="showCheckBox ? 10 : 13">{{ item.orgName }} </a-col>
						</a-row>
					</a-list-item>
				</template>
				<!--<template #header>
						<div>Header</div>
				</template>-->
				<template #footer v-if="searchKey == ''">
					<div class="footer" ref="footer">
						<a-spin :indicator="indicator" />
					</div>
				</template>
				<template #footer v-if="searchKey != ''">
					<div style="font-size: 12px; color: #b9bdc3" class="footer" ref="footer">没有更多...</div>
				</template>
			</a-list>
		</div>
	</div>
</template>
<script setup name="MemberPicker" lang='ts'>
import userApi from '@/api/sys/userApi'
import {Empty} from 'ant-design-vue'
import {LoadingOutlined} from '@ant-design/icons-vue'
import {uniqBy} from 'lodash'

const plainOptions = ['显示全部', '离职', '在职']
	const checkedList = ref(['在职'])
	const emit = defineEmits({
		selectedMembers: undefined,
		'update:members': undefined
	})
	const plainOptionsChange = (val) => {
		checkedList.value = [val[0]]
		userList.value = []
		loadData()
	}
	const props = defineProps({
		showCheckBox: {
			type: Boolean,
			default: () => false
		},
		multiple: {
			type: Boolean,
			default: () => false
		},
		members: {
			type: Array,
			default: () => []
		},
		showSelectedUser: {
			type: Boolean,
			default: () => false
		}
	})
	let loading = ref(false)
	let searchKey = ref('')
	let loadSelectedMembers = ref(false)
	const selectedArr = computed({
		get: () => {
			return props.members
		},
		set: (val) => {
			emit('update:members', val)
		}
	})
	const indicator = h(LoadingOutlined, {
		style: {
			fontSize: '24px'
		},
		spin: true
	})
	const userList = ref([])
	const footer = ref(null)
	const box = ref(null)
	const pageConfig = ref({
		current: 1,
		size: 200,
		end: false
	})
	const selected = (item) => {
		var selected = JSON.parse(JSON.stringify(selectedArr.value))
		if (props.multiple) {
			item.checked = !item.checked
			if (item.checked) {
				uniqBy(selected.push(item), (e) => {
					return e.id
				})
			} else {
				selected = selected.filter((res) => {
					return res.id != item.id
				})
			}
		} else {
			userList.value = userList.value.map((res) => {
				if (res.id != item.id) {
					res.checked = false
				}
				return res
			})
			if (!item.checked) {
				item.checked = true
				selected = [item]
			} else {
				item.checked = false
				selected = []
			}
		}
		selectedArr.value = JSON.parse(JSON.stringify(selected))
		emit('selectedMembers', selected)
	}
	const closetag = (item) => {
		let target = userList.value.find((res) => {
			return res.id == item.id
		})
		if (target) {
			selected(target)
		} else {
			var _selected = JSON.parse(JSON.stringify(selectedArr.value))
			_selected = _selected.filter((res) => {
				return res.id != item.id
			})
			selectedArr.value = JSON.parse(JSON.stringify(_selected))
		}
	}
	const loadData = () => {
		if (loading.value == true) {
			return
		}
		loading.value = true
		if (searchKey.value) {
			pageConfig.value.current = 1
			pageConfig.value.size = 9999
		} else {
			pageConfig.value.size = 200
		}
		userApi
			.userPage({
				current: pageConfig.value.current,
				size: pageConfig.value.size,
				searchKey: searchKey.value
			})
			.then((res) => {
				switch (checkedList.value[0]) {
					case '显示全部': {
						break
					}
					case '离职': {
						res.records = JSON.parse(JSON.stringify(res.records)).filter((res) => {
							return res.userStatus != 'ENABLE'
						})
						break
					}
					case '在职': {
						res.records = JSON.parse(JSON.stringify(res.records)).filter((res) => {
							return res.userStatus == 'ENABLE'
						})
						break
					}
				}
				if (searchKey.value) {
					if (!res || !res.records || res.records.length < 1) {
						pageConfig.value.end = true
					} else {
						userList.value = res.records
					}
				} else {
					if (!res || !res.records || res.records.length < 1) {
						pageConfig.value.end = true
					} else {
						userList.value = userList.value.concat(res.records)
						pageConfig.value.current += 1
					}
				}
				if (userList.value.length > 0) {
					userList.value.forEach((res) => {
						if (
							selectedArr.value.length > 0 &&
							selectedArr.value.some((sres) => {
								return sres.id == res.id
							})
						) {
							res.delete = selectedArr.value.find((fres) => {
								return fres.id == res.id
							}).delete
							res.checked = true
						} else {
							res.checked = false
							res.delete = true
						}
					})
				}
				loading.value = false
			})
	}
	watch(
		() => searchKey.value,
		(val) => {
			userList.value = []
			loadData()
		},
		{}
	)
	onMounted(() => {
		let intersectionObserver = new IntersectionObserver((entries) => {
			if (entries[0].intersectionRatio <= 0 && loading.value == true) return
			loadData()
		})
		intersectionObserver.observe(footer.value)
	})
	defineExpose({ loadSelectedMembers })
</script>
<style scoped lang="less">
	.MemberPicker {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		height: 100%;
		.showSelectedUser {
			flex: 0 1 150px;
			width: 100%;
			margin-bottom: 12px;
			overflow-y: auto;
			.ant-tag {
				margin-bottom: 6px;
			}
		}
		.ant-input-search {
			flex: 0;
			width: 100%;
		}
		.box {
			width: 100%;
			flex: 0 1 100%;
			overflow-y: auto;
			.ant-list-bordered {
				border: none;
			}
			:deep(.ant-list-item) {
				padding: 8px 0;
				&:hover {
					background: #efefef;
					color: #1890ff;
				}
				.item-line {
					cursor: pointer;
					transition: all 0.5s;
					& > * {
						overflow: hidden;
						word-break: break-all;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-size: 12px;
						&.name {
							font-size: 12px;
						}
					}
					&.leave {
						background: #d9d9d940;
						color: #4446;
					}
				}
				&.selected {
					background: #e6f7ff;
					color: #1890ff;
				}
			}
		}
		:deep(.ant-list-footer) {
			background: #bbcdf71a;
			padding: 5px 16px;
			.footer {
				text-align: center;
				:deep(.ant-spin-dot) {
					font-size: 18px !important;
				}
			}
		}
	}
</style>
